import React, { Component } from 'react';
import { MoreOutline, LeftOutline } from 'antd-mobile-icons'
import { Button, Space, Toast } from 'antd-mobile'
import '../style/Index/Login/login.css'
import services from '../api/interface'

class Login extends Component {
    state={
        loginname:'',password:''
    }
    onClick() {
        this.props.history.go(-1)
    }
    onregister(){
        this.props.history.push('/register')
    }
    onchange(e){
        this.setState({ 
            [e.target.name]:e.target.value
        })
    }
    async onloginclick(){
        var res = await services.user.user_login({loginname:this.state.loginname,password:this.state.password})
        if(res.data.code==200){
            localStorage.setItem('userid',JSON.stringify(res.data.data.userid))
            localStorage.setItem('token',res.data.data.token)
            localStorage.setItem('phone',this.state.loginname)
            Toast.show({
                icon: 'success',
                content: '登录成功！',   
            })
            this.props.history.push('/index')
        }else if(res.data.code==10010){
            Toast.show({
                icon: 'fail',
                content: '该用户不存在！',   
            })
        }
    }
    render() {
        return (
            <div className='login'>
                <div className='dnavbar'>
                    <span onClick={() => { this.onClick() }}><LeftOutline /></span>
                    <div>登录</div>
                    <div className='dmicon'>
                        <MoreOutline />
                    </div>
                </div>
                <div className="lcontent">
                    <input type="text" placeholder='手机号/账户名/邮箱' name='loginname' value={this.state.loginname} onChange={(e)=>{this.onchange(e)}} />
                    <input type="password" placeholder='请输入密码' name='password' value={this.state.password} onChange={(e)=>{this.onchange(e)}}  />
                    <button onClick={()=>{this.onloginclick()}}>登录</button>
                    <div className="quickregister" onClick={()=>{this.onregister()}}>
                        手机快速注册
                    </div>
                </div>
            </div>
        );
    }
}

export default Login;